<template>
    <button :disabled="props.disabled || props.loading" ref="_ref" 
    :class="styleArr"  @click="handClick" :style="buttonStyle">
        <template v-if="loading">
            <slot name="loading" v-if="slots.loading"></slot>
            <i v-else :class="['iconfont', 'icon-jiazai1 rotate',props.loading ? 'marge' : '']"></i>
        </template>
        <div v-if="props.icon">
            <i :class="['iconfont', props.icon, slots.default ? 'marge' : '']"></i>
        </div>
        <span v-if="slots.default">
            <slot />
        </span>
    </button>
</template>

<script setup lang="ts">
import { onMounted, useSlots, } from "vue"
// 导入button数据
import { buttonProps, buttonEmits } from "./botton"
//button方法
import { useButton } from "./use-button"

import { useButtonCustomStyle } from "./button-custom"



let props = defineProps(buttonProps)
// console.log(props)
const buttonStyle = useButtonCustomStyle(props)


let emit = defineEmits(buttonEmits)

let { handClick,styleArr} = useButton(props, emit)

//判断插槽是否传值了
let slots = useSlots()

onMounted(()=>{
    // console.log(styleArr.value,"styleArr")
})

</script>

<style scoped lang="scss">
@import "../style/style.scss";
@import "../style/button.scss";
</style>

<!-- <style scoped lang="scss">

</style> -->